<template>
	<div class="outer">
    <search-header @to-search="goSearch()">
      <span class="sigin"></span>
      <div slot="action" class="message" @click="goMessageCenter()">
        <div class="red-pot" v-if="hasMessage"></div>
      </div>
    </search-header>
    <div class="swiper-container" id="swiperTab" ng-show="!showloading">
      <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="(c,index) in tabsData" :key="c.id" @click="changeTab(c.id,index)">
          <span>{{c.name}}</span>
          <div class="tab-bar" :data-index="index" :class="{ 'active': index == activeTab}"></div>
        </div>
      </div>
    </div>
    <scroll :topArea="74" :bottomArea="44" @pullingDown="onpullingDown" @pullingUp="onpullingUp" ref="homeScroll">
      <div class="banner">
        <div class="swiper-container" id="swiper2">
          <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="i in adverts" :key="i.id">
                <img :src="i.imgFull" alt="banner">
            </div>
          </div>
          <div class="swiper-pagination"></div>
        </div>
      </div>
      <router-view/>
    </scroll>
	</div>
</template>

<script>
import searchHeader from '@/components/searchHeader'
import {getHomeData , getFirstCategory,checkMessage} from "@/api/homepage.js"
export default {
  name: 'leaseHome',
  data(){
  	return {
  		adverts: [],
  		newProduct: [],
  		peopleLikeProduct: [],
  		promotionlist: [],
  		tabsData: [],
  		tablist: [],
  		tabSwiper: null,
  		mySwiper2: null,
      activeTab: localStorage.activeTab ? localStorage.activeTab :0,
      transionName: '',
      hasMessage: false,
  	}
  },
  components: {
  	'search-header': searchHeader,
  },
  methods: {
    goMessageCenter: function(){
      this.$router.push({name: "messageCenter"});
    },
  	goSearch: function(){
      localStorage.originUrl = location.hash.substring(1);
      this.$router.push({name:'advice'});
  	},
    changeTab: function(id,index){
      // if(this.activeTab > index){
      //   this.transionName = "slide-fade"
      // }else if(this.activeTab < index){
      //   this.transionName = "slide-fade"
      // }
      if(this.activeTab < index){
        if(index>1){
          this.tabSwiper.slideNext();
        }
      }else {
        if(index<this.tabsData.length-1){
          this.tabSwiper.slidePrev();
        }
      }
      this.activeTab = index;
      localStorage.activeTab = index;
      if(index == 0){
        this.$router.push({path:"/tabs/home/recommend"})
      }else {
        this.$router.push({ name: "secondCategory", params: { id: id }})
      }
    },
  	homeData: function(){
  		getHomeData().then( data =>{
        if(data.code == 200){
            this.adverts = data.data.bannerList;
            this.setSlides();
            if(this.activeTab){
              var destiTab;
              if(this.activeTab > 1){
                destiTab = this.activeTab - 1;
              }else {
                destiTab = 0;
              }
              this.tabSwiper.slideTo(destiTab, 1, false);
            }
            this.$refs.homeScroll.forceUpdate()
        }else {
          this.$vux.toast.show({
            text: data.message,
            time: 1000,
            width: 'auto',
            // position: 'middle'
          })
          this.$refs.homeScroll.forceUpdate()
        }
  			
        // this.$nextTick(() => {
        //   this.scroll = new Bscroll(this.$refs.wrapper, {})
        // });
    	})
  	},
  	firstCategory: function(){
  		getFirstCategory().then( data => {
        if(data.code == 200){
          this.tabsData = data.data;
          // tablist用于请求二级分类
          this.tablist = [...this.tabsData];
          this.tablist.shift();
          this.homeData();
        }else {
          this.$vux.toast.show({
            text: data.message,
            time: 1000,
            width: 'auto',
            // position: 'middle'
          })
        }
  		})
  	},
  	setSlides: function(){
  		this.tabSwiper =  new Swiper('#swiperTab',{
          observer: true,
          slidesPerView : 5,
          loop: false,
      });
  		this.mySwiper2 = new Swiper('#swiper2', {
          observer:true,
          observeParents: true,
          autoplayDisableOnInteraction : false,
          autoplay: 4000,
          pagination: {
            el: '.swiper-pagination',
            type: 'bullets',
            bulletElement : 'li',
            bulletClass : 'my-bullet',
          }
      });
  	},
    onpullingDown: function(){
      this.$store.commit('changeCateUpdate','update');
    },
    onpullingUp: function(){
      this.$refs.homeScroll.forceUpdate()
    }
  },
  mounted: function(){
  	this.firstCategory();
    // 查询是否有消息
    if(localStorage.token){
      checkMessage().then( data => {
        if(data.code == 200){
          this.hasMessage = true;
        }else {
          this.hasMessage = false;
        }
      })
    }
  },
  computed: {
    tabChange(){
        return this.$store.getters.getTabChange;
    },
    canResize(){
      return this.$store.getters.getCanHomeResize;
    }
  },
  watch: {
    "tabChange": function(){
      setTimeout(() => {
        this.$refs.homeScroll.forceUpdate(true)
      }, this.refreshDelay)
    },
    "$route": function(){
      this.$refs.homeScroll.scrollTo(0,0,1)
    },
    "canResize": function(){
      if(this.canResize == true){
        this.$refs.homeScroll.forceUpdate();
        this.$store.commit('changeCateUpdate',false);
        this.$store.commit('changeCanHomeResize',false)
      }
    }
  }
}
</script>
<style lang="scss" scoped>
	.outer {
		height: 100%;
    width: 100%;
    position: absolute;
	}
	#swiperTab {
    width: 100%;
		height: 30px;
    background: #fff;
    position: fixed;
    top: 44px;
    left: 0;
    border-top: 1px solid #eee;
    z-index: 200;
    & .swiper-slide {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;
      &>span {
        height: 28px;
        line-height: 28px;
        width: 100%;
        text-align: center;
      }
      &>div {
        height: 2px;
        width: 60%;
        &.active {
            background: #333;
          }
      }
    }
	}
  .banner {
    width: 100%;
    height: 172px;
    & img {
      width: 100%;
      height: 100%;
    }
  }
  // 分页器样式
  .swiper-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 10px;
  }
  .message {
    width: 20px;
    height: 20px;
    background: url('../../assets/img/lease/title-edit.png') 0 0 no-repeat;
    background-size: 100%;
    margin-top: 1px;
    position: relative;
    & .red-pot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: rgba(255,0,0,0.8);
      position: absolute;
      top: -3px;
      right:  -3px;
    }
  }
</style>